<template>
	<view class="index">
		<top-blank></top-blank>
		<view class="uni-margin-wrap">
			<swiper class="swiper" circular :indicator-dots="indicatorDots" :autoplay="autoplay" :interval="interval"
				:duration="duration">
				<swiper-item>
					<view class="swiper-item">
						<image class="swiperImage" mode="aspectFill" src="../../static/image/test/excavator.jpg">
						</image>
					</view>
				</swiper-item>
				<swiper-item>
					<view class="swiper-item">
						<image class="swiperImage" mode="aspectFill" src="../../static/image/test/crane.jpg"></image>
					</view>
				</swiper-item>
				<swiper-item>
					<view class="swiper-item">
						<image class="swiperImage" mode="aspectFill" src="../../static/image/test/Bulldozer.png">
						</image>
					</view>
				</swiper-item>
			</swiper>
		</view>

		<view class="indexBottom">
			<view class="chooseServer">
				<view class="equipment-repair" @click="gotoRepair">
					<view class="title">设备维修</view>
					<image src="../../static/image/index-icon/equipment-repair-icon.png" class="equipment-icon"></image>
				</view>
				<view class="equipment-maintenance" @click="gotoMaintenance">
					<view class="title">设备保养</view>
					<image src="../../static/image/index-icon/equipment-maintenance-icon.png" class="equipment-icon">
					</image>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import MyStore from '@/store/index.js'
	const token = uni.getStorageSync('token');
	export default {
		data() {
			return {
				indicatorDots: true, //是否显示面板指示点
				autoplay: true,
				interval: 2000, //自动切换时间间隔
				duration: 500, //滑动动画时长
			}
		},
		onLoad() {
			console.log("打印token", token);
			const userData = uni.getStorageSync('userData');
			console.log("user登录记录", userData); // 输出: user登录记录
			
			if (userData.role != 'user') {
				uni.showToast({
					duration: 2000,
					title: "您不是用户，无法访问！",
					icon: 'none',
					mask: "true"
				})
			
				setTimeout(function() {
					uni.redirectTo({
						url: '/pages/login/login'
					})
				}, 2000); // 1000毫秒等于1秒钟
			
				return;
			}
		},
		methods: {
			gotoRepair() {
				MyStore.dispatch("setChoosePositionAsync", 1);

				uni.navigateTo({
					url: '/components/RepairInformation/RepairInformation'
				})
			},
			gotoMaintenance() {
				MyStore.dispatch("setChoosePositionAsync", 2);
				uni.navigateTo({
					url: "/pages/equipment-maintenance/equipment-maintenance"
				})
			}
		}
	}
</script>

<style lang="scss">
	page {
		background-color: #333333;
	}


	.index {
		.search {
			color: white;
		}

		margin-bottom: 8vh;

		.uni-margin-wrap {
			// border: 1px solid black;
			height: 450rpx;

			.swiper {
				// border: 1px solid black;
				height: 450rpx;

				.swiper-item {
					display: block;
					text-align: center;
					// border: 1px solid black;
					height: 450rpx;

					.swiperImage {
						width: 100vw;
						height: 450rpx;
					}
				}
			}
		}

		.indexBottom {
			.chooseServer {
				margin-top: 50rpx;
				padding: 30rpx 0;
				width: 100vw;
				height: 100rpx;
				display: flex;
				justify-content: space-around;
				border-top: 2rpx solid #bbbbbb;
				border-bottom: 2rpx solid #bbbbbb;
				color: #ffb612;

				.equipment-repair {
					padding: 0 20rpx;
					border-radius: 10rpx;
					display: flex;
					align-items: center;
					border: 2rpx solid #ffb612;

					// border: 1px solid #bbbbbb;
					&:active {
						border: 3rpx solid #ffb612;
						box-shadow: 0 0 16rpx #ffb612;
					}
				}

				.equipment-maintenance {
					padding: 0 20rpx;
					border-radius: 10rpx;
					display: flex;
					align-items: center;
					border: 1px solid #ffb612;

					// border: 1px solid #bbbbbb;
					&:active {
						border: 3rpx solid #ffb612;
						box-shadow: 0 0 16rpx #ffb612;
					}

				}

				.equipment-icon {
					width: 50rpx;
					height: 50rpx;
					margin: 0 15rpx 0 30rpx;
				}

			}
		}

	}
</style>
